<template>
  <div class="container fade-in">
    <div class="header">
      <h2 class="section-title">门店详情</h2>
      <div class="actions">
        <router-link to="/stores" class="btn secondary">返回列表</router-link>
      </div>
  </div>

    <div class="card slide-up" style="animation-delay: 0.2s">
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>
      <div v-else-if="!store" class="empty-state">
        <div class="icon">❓</div>
        <h3>未找到该门店</h3>
        <p>请返回列表重新选择</p>
      </div>
      <div v-else class="detail-grid">
        <div class="row"><div class="label">门店编码</div><div class="value">{{ store.storeCode || '-' }}</div></div>
        <div class="row"><div class="label">名称</div><div class="value">{{ store.name }}</div></div>
        <div class="row"><div class="label">联系人</div><div class="value">{{ store.contactPerson || '-' }}</div></div>
        <div class="row"><div class="label">联系电话</div><div class="value">{{ store.contactPhone || '-' }}</div></div>
        <div class="row"><div class="label">地址</div><div class="value">{{ store.address || '-' }}</div></div>
        <div class="row"><div class="label">详细地址</div><div class="value">{{ store.detailedAddress || '-' }}</div></div>
        <div class="row"><div class="label">启用状态</div><div class="value">{{ enableText(store.enableStatus) }}</div></div>
        <div class="row"><div class="label">所属商户</div><div class="value">{{ store.merchantId || '-' }}</div></div>
        <div class="row"><div class="label">创建时间</div><div class="value">{{ formatDate(store.creationTime) }}</div></div>
      </div>
    </div>

    <!-- 门店对应的收款码列表 -->
    <div class="card table-container slide-up" style="animation-delay: 0.3s">
      <div class="table-header">
        <h3>收款码列表</h3>
        <div class="table-actions">
          <button class="btn secondary" @click="loadCodes">
            <span class="icon">🔄</span>
            刷新
          </button>
        </div>
      </div>

      <table class="table">
        <thead>
          <tr>
            <th>收款码编号</th>
            <th>名称</th>
            <th>启用状态</th>
            <th>分账协议</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="codesLoading" class="loading-row">
            <td colspan="6" class="loading">
              <div class="spinner"></div>
              加载中...
            </td>
          </tr>
          <tr v-else-if="codes.length === 0" class="empty-row">
            <td colspan="6" class="empty">暂无收款码</td>
          </tr>
          <tr v-else v-for="c in codes" :key="c.id" class="table-row">
            <td>{{ c.code || '-' }}</td>
            <td>{{ c.codeName || '-' }}</td>
            <td>
              <span class="badge" :class="enableBadge(c.enableStatus)">{{ enableText(c.enableStatus) }}</span>
            </td>
            <td>{{ c.dividedAgreementId ? '已设置' : '未设置' }}</td>
            <td>{{ formatDate(c.creationTime) }}</td>
            <td>
              <router-link class="btn small" :to="`/payment-codes/detail/${c.id}`">详情</router-link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { StoreService, type StoreResponse } from '../services/store'
import { PaymentCodeService, type PaymentCodeResponse } from '../services/paymentCode'
import { isSuccess } from '../services/types'

const route = useRoute()
const id = String(route.params.id || '')
const loading = ref(false)
const store = ref<StoreResponse | null>(null)
const codesLoading = ref(false)
const codes = ref<PaymentCodeResponse[]>([])
const pageSize = 5

function formatDate(v?: string) {
  if (!v) return '-'
  try { return new Date(v).toLocaleString('zh-CN') } catch { return v }
}
function enableText(s?: number) {
  if (s === 1) return '启用'
  if (s === 0) return '禁用'
  return '未知'
}
function enableBadge(s?: number) {
  return s === 1 ? 'active' : 'inactive'
}

async function loadDetail() {
  loading.value = true
  try {
    const res = await StoreService.getStoreDetail(id)
    if (isSuccess(res)) {
      store.value = res.data || null
    } else {
      store.value = null
      console.warn('获取门店详情失败:', res?.message)
    }
  } catch (e) {
    console.error('接口异常:', e)
  } finally {
    loading.value = false
  }
}

async function loadCodes() {
  codesLoading.value = true
  try {
    const res = await PaymentCodeService.getPaymentCodeList(1, pageSize, '', id)
    if (isSuccess(res) && res.data) {
      codes.value = res.data.data || []
    } else {
      codes.value = []
      console.warn('获取收款码列表失败:', res?.message)
    }
  } catch (e) {
    console.error('接口异常:', e)
  } finally {
    codesLoading.value = false
  }
}

onMounted(() => {
  loadDetail()
  loadCodes()
})
</script>

<style scoped>
.detail-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
.row { display: contents; }
.label { color: var(--text-secondary); }
.value { color: var(--text); font-weight: 500; }
.loading-state, .empty-state { text-align: center; padding: var(--space-6); color: var(--text-secondary); }
.loading-spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary-600); border-radius: 50%; display:inline-block; animation: spin 0.8s linear infinite; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 表格样式复用列表页风格 */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--border); }
.badge { padding: 2px 8px; border-radius: var(--radius); font-size: var(--text-sm); }
.badge.active { background: var(--primary-50); color: var(--primary-700); }
.badge.inactive { background: var(--bg-secondary); color: var(--text-secondary); }
.table-container { overflow-x: auto; }
.table-header { display:flex; align-items:center; justify-content:space-between; padding: 8px 12px; }
.table-actions { display:flex; gap: 8px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary-600); border-radius: 50%; display:inline-block; animation: spin 0.8s linear infinite; margin-right: 8px; }
</style>
